<template>
  <div class="main">
    <div class="top">
      <div class="left">{{now}}</div>
      <div class="mid">
        <img src="../../../static/assets/icon.png" alt="" class="icon">
        <img src="./static/title.png" alt="">
      </div>
      <div class="right">数据来源：招才引智创新发展大会网络平台</div>
    </div>
    <div class="middle">
      <div class="item-box" v-for="(val, key) in list" :key="key">
        <div class="item">
          <div class="tit">{{val.receptionCom || '--'}}</div>
          <div class="content">
            <span>总 <grow-num :value="Number(val.total || 0)"></grow-num></span>
            <span>A <grow-num :value="Number(val.typeA || 0)"></grow-num></span>
            <span>B <grow-num :value="Number(val.typeB || 0)"></grow-num></span>
            <span>C <grow-num :value="Number(val.typeC || 0)"></grow-num></span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-c">
        <span class="bot-text">共有 <span class="yellow"><grow-num :value="Number(total || 0)"></grow-num></span> 家接待单位</span>
        <span class="bot-text">共有
          <span class="yellow"><grow-num :value="Number(totalL.total || 0)"></grow-num></span>
          位特邀嘉宾（其中A类
          <span class="yellow"><grow-num :value="Number(totalL.typeA || 0)"></grow-num></span>
          人，B类
          <span class="yellow"><grow-num :value="Number(totalL.typeB || 0)"></grow-num></span>
          人，C类
          <span class="yellow"><grow-num :value="Number(totalL.typeC || 0)"></grow-num></span>
          人，其他
          <span class="yellow"><grow-num :value="Number(totalL.typeQ || 0)"></grow-num></span>
          人）</span>
      </div>
    </div>
  </div>
</template>
<script>
import {dateFormat} from '../../common/js/utils'
import GrowNum from '../../components/grow-num/grow-num.vue'
import {INTERVAL} from '../../common/js/config'

export default {
  components: {GrowNum},
  data() {
    return {
      now: '',
      list: [],
      total: '',
      totalL: {}
    }
  },
  methods: {
    setTime() {
      this.now = dateFormat(new Date(), 'yyyy年MM月dd日 hh:mm:ss')
    },
    getList() {
      this.$post('/service/business/college/registration/guestRegist/getGuestCount.xf', {}).then(res => {
        this.list = res.result
      })
    },
    getTotal() {
      this.$post('/service/business/college/registration/guestRegist/getButtomCount.xf', {}).then(res => {
        this.total = res.result.comCount
        this.totalL = res.result.list[0] || {}
      })
    }
  },
  created() {
    this.getList()
    this.getTotal()
    setInterval(() => {
      this.setTime()
    }, 1000)
    setInterval(() => {
      this.getList()
      this.getTotal()
    }, INTERVAL)
  }
}
</script>
<style lang="scss" scoped>
  @import "../../common/style/variables";
  .main{
    width: 100%;
    height: 100%;
    background: url("../index/static/bg.jpg") no-repeat;
    background-size: 100% 100%;
    .top{
      height: 10%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        font-size: 28px;
        font-weight: bold;
        color: #8cd1f7;
        text-align: center;
        width: 25%;
      }
      .mid{
        display: flex;
        align-items: center;
        justify-content: center;
        .icon{
          margin: 0 10px 0 0;
        }
      }
      .right{
        font-size: 22px;
        font-weight: bold;
        color: #8cd1f7;
        text-align: center;
        width: 25%;
      }
    }
    .middle{
      width: 98%;
      height: 81%;
      padding: 20px;
      overflow-y: auto;
      background: rgba(255,255,255,.07);
      border-radius: 5px;
      margin: 0 auto;
      @include clearFixed;
      .item-box{
        width: 16.6%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        .item{
          width: 90%;
          height: 90%;
          border: 1px solid #8cd1f7;
          border-radius: 3px;
          background: rgba(255,255,255,0.03);
          padding: 10px;
          .tit{
            display: inline-block;
            width: 100%;
            @include ellipsis;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            padding: 0 0 13px 0;
          }
          .content{
            font-size: 16px;
            color: #8cd1f7;
            font-weight: bold;
            display: flex;
            span{
              flex: 1;
              text-align: center;
              &:not(:last-child){
                border-right: 1px solid #8cd1f7;
              }
            }
          }
        }
      }
    }
    .bottom{
      padding: 5px 0;
      height: 9%;
      width: 98%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      .bottom-c{
        background: rgba(255,255,255,0.07);
        border-radius: 5px;
        width: 100%;
        height: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        .bot-text{
          padding: 0 0 0 50px;
          flex: 1;
          font-size: 22px;
          color: #fff;
          .yellow{
            color: #fff100;
          }
        }
      }
    }
  }
</style>
